<template>
  <div class="goods-category">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div
        slot="header"
        class="goods-header"
      >
        <span>{{ $route.meta.title }}</span>
        <el-button
          type="primary"
          size="small"
          @click="hanldeAddCateDialog"
          >添加</el-button
        >
      </div>
      <!-- card body -->
      <el-table :data="goodsList">
        <el-table-column
          label="序号"
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column label="分类名称">
          <template slot-scope="scope">
            <span v-if="scope.row.isEdit">{{ scope.row.cateName }}</span>
            <el-input
              v-else
              v-model="scope.row.cateName"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="是否启动"
          prop="state"
        >
          <el-switch
            slot-scope="scope"
            v-model="scope.row.state"
            :disabled="scope.row.isEdit ? true : false"
          >
          </el-switch>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="state"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isEdit"
              type="default"
              size="small"
              @click="scope.row.isEdit = !scope.row.isEdit"
            >
              编辑
            </el-button>
            <el-button
              v-else
              type="success"
              size="small"
              @click="handleEditGoods(scope.row)"
            >
              更新
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDeleteGoods(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        layout="total, prev, pager, next ,jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 弹窗 -->
      <el-dialog
        title="添加商品分类"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="() => (dialogVisible = false)"
      >
        <!-- <span>这是一段信息</span> -->
        <el-form
          :model="cateForm"
          ref="cateFormRef"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-form-item label="分类名称">
            <el-input v-model="cateForm.cateName"></el-input>
          </el-form-item>

          <el-form-item label="是否启用">
            <el-switch v-model="cateForm.state"> </el-switch>
          </el-form-item>
        </el-form>

        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="handleAddCate"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getGoodsList, addCate, editCate } from '@/api/goods.js'
export default {
  data() {
    return {
      dialogVisible: false,
      value: true,
      currentPage: 1,
      pageSize: 6,
      total: 0,
      goodsList: [],
      cateForm: {
        cateName: '',
        state: false
      }
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 跳转指定页
    handleCurrentChange(page) {
      this.currentPage = page
      this.getGoodsList()
    },
    // 分类弹窗
    hanldeAddCateDialog() {
      // 重置为空防止下次添加使用上次的数据
      this.cateForm = {
        state: false,
        cateName: ''
      }
      this.dialogVisible = true
    },
    // 添加分类
    async handleAddCate() {
      // console.log(this.cateForm)
      const params = { ...this.cateForm }
      params.state = params.state ? 1 : 0

      // params.state = params.state === 1
      await addCate(params)
      this.getGoodsList()
      this.dialogVisible = false
    },
    async getGoodsList() {
      const res = await getGoodsList(this.currentPage, this.pageSize)
      res.data.forEach((v) => {
        v.state = v.state === 1
        v.isEdit = true
      })
      this.total = res.total
      this.goodsList = res.data
    },
    // 编辑分类
    async handleEditGoods(row) {
      // 防止页面上的数据被改动，拷贝一分新的数据
      const params = { ...row }
      // 处理后台需要的数据格式
      params.state = params.state ? 1 : 0
      await editCate(params)
      this.$message({
        type: 'success',
        message: '编辑成功',
        duration: 500,
        onClose: () => {
          row.isEdit = !row.isEdit
        }
      })
    },
    handleDeleteGoods() {}
  }
}
</script>
<style lang="scss" scoped>
.goods-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-pagination {
  margin-top: 20px;
  padding-left: 0;
  .btn-prev {
    margin-left: 0;
  }
}
</style>
